<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">



		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">


		<title>栅格系统 col-sm-xxx</title>

		<!-- 课程使用的是 3.3.7 bootstrap  -->

		<style>
			div {

				border: 0.2px solid #dddddd;
			}
		</style>
	</head>
	<body>


		<h1>实例：手机、平板、桌面</h1>


		<p>
			在上面案例的基础上，通过使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。




		</p>

		<div class="container">

			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			</div>
			<div class="row">
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				<!-- Optional: clear the XS cols if their content doesn't match in height -->
				<!-- <div class="clearfix visible-xs-block"></div> -->
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
			</div>

		</div>







	</body>
</html>
